<cly-confirm-dialog @cancel="cancel" @confirm="submit" :visible.sync="isOpen" :show-close="false" width="674px" class="cly-vue-remote-config-condition-dialog"
  :modal="false" center>
  <template v-slot:title>
    <h3 class="color-cool-gray-100">{{i18n('remote-config.parameter.conditions.add.new.condition')}}</h3>
  </template>
  <template slot-scope="scope">
    <cly-form>
      <template v-slot="formScope">
        <cly-form-step id="conditions-dialog">
          <div class="cly-vue-drawer-step__section">
            <cly-form-field v-slot="validation" name="condition-name" :subheading="i18n('placeholder.condition-name')" :label="i18n('remote-config.condition-name')" rules="required" rules="required|regex:^[a-zA-Z0-9 ]+$">
              <el-input
                v-model="conditionDialog.condition_name"
                :placeholder="i18n('remote-config.condition.name.placeholder')">
              </el-input>
              <div v-if="validation.errors.length > 0" class="text-small color-red-100 bu-pt-1">
                {{i18n('remote-config.condition-key-error')}}
              </div>
            </cly-form-field>
            <div class="bu-pt-3 bu-mt-2 bu-pb-1">
              <el-checkbox class="text-smallish"
                v-bind:label="i18n('remote-config.use.description')"
                v-model="useDescription"
                >
              </el-checkbox>
              <div class="bu-pt-3 cly-vue-remote-config-conditions-drawer" v-if="useDescription">
                <cly-form-field name="description" :label="i18n('remote-config.conditions.description')" rules="required">
                  <textarea
                    class="input"
                    v-model="conditionDialog.condition_description"
                    :placeholder="i18n('remote-config.conditions.description.placeholder')">
                  </textarea>
                </cly-form-field>
              </div>
            </div>
            <div class="bu-py-4">
              <div class="text-big bu-mb-1">
                {{i18n('remote-config.condition.color.tag')}}
              </div>
              <div class="bu-mb-3 color-cool-gray-50 text-small bu-mb-1">
                {{i18n('remote-config.condition.color.tag.description')}}
              </div>
              <cly-color-tag :tags="colorTag"  :defaultTag="defaultTag" v-model="selectedTag"></cly-color-tag>
            </div>
            <div v-if="showSeedValue" class="bu-py-4">
              <div class="font-weight-bold text-smallish bu-mb-1">
                {{i18n('remote-config.seed')}}
              </div>
              <div class="color-cool-gray-50 text-small bu-mb-1">
                {{i18n('remote-config.seed-value-description')}}
              </div>
              <el-input
                v-model="conditionDialog.seed_value"
                :placeholder="i18n('placeholder.seed-value')">
              </el-input>
            </div>
            <div class="bu-pt-4">
              <div class="font-weight-bold text-big bu-mb-1">
                {{i18n('remote-config.condition-definition')}}
              </div>
              <div class="color-cool-gray-50 text-small bu-mb-1">
                {{i18n('remote-config.condition-definition.description')}}
              </div>
              <div>
                  <validation-provider name="condition-definition" rules="required" v-slot="v">
                  <cly-qb-segmentation 
                    ref="conditionQb"
                    :class="{'is-error': v.errors.length > 0}"
                    :additional-properties="additionalProperties"
                    :additionalRules="remoteConfigFilterRules"
                    :add-empty-row-on-empty-query="true"
                    :allow-breakdown="false"
                    :orGroupsEnabled="true"
                    v-model="managedPropertySegmentation">
                  </cly-qb-segmentation>
                </validation-provider>
              </div>
            </div>
          </div>
        </cly-form-step>
      </template>
    </cly-form>
  </template>
</cly-confirm-dialog>